<template>
  <div class="rightmiddlebox" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var chartDom = document.querySelector(".rightmiddlebox");
    var myChart = echarts.init(chartDom);
    // 设置配置项
    let option = {
      // 标题
      title: {
        // 标题文本
        text: "世界每周新增治愈和死亡人数",
        //  居中对齐
        textAlign: "center",
        //  标题水平位置
        left: "50%",
        // 标题样式
        textStyle: {
          fontSize: "10",
          color: "#ffffff",
          // 字体加粗
          fontWeight: "normal",
        },
      },
      tooltip: {
        trigger: "axis",
      },
      // x轴
      xAxis: {
        // 当前坐标轴为类目轴
        type: "category",
        // 让line紧贴y轴
        boundaryGap: false,
        data: ["6.09", "6.23", "7.07", "7.21", "8.04", "8.18", "09.0"],
        // x轴上的标签样式
        axisLabel: {
          color: "#8089ab",
        },
      },
      yAxis: {
        type: "value",
        // y轴上的标签样式
        axisLabel: {
          color: "#8089ab",
        },
        //  分割线
        splitLine: {
          // 分割线的样式
          lineStyle: {
            color: "#0e1b5b",
          },
        },
        //  y轴轴线
        axisLine: {
          show: true, //  轴线是否显示
          //  轴线样式
          lineStyle: {
            color: "#0e1c5e",
          },
        },
      },
      series: [
        {
          name: "治愈人数", //  系列的名称
          type: "line", //  类型
          // 设置成面积图
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,     
                  color: "#00b87f", // 0%处的颜色
                },
                {
                  offset: 1,
                  color: "transparent", // 100%处的颜色
                },
              ],
              global:false, //   缺省为false
            },
          },
          //  去那个小白点
          symbol: "none",
          emphasis: {
            focus: "series",
          },
          data: [
            32076245, 36097135, 36541539, 36872158, 37105707, 37551474,
            38457029,
          ],
        },
        {
          name: "死亡人数",
          type: "line", // stack: "Total",
          // 设置成面积图
          areaStyle: {},
          //  去那个小白点
          symbol: "none",
          // emphasis: {
          //   focus: "series",
          // },
          data: [803460, 902287, 906337, 909681, 913147, 920206, 932645],
        },
      ],
      grid: {
        top: "25%",
        left: "20%",
        right: "10%",
        bottom: "15%",
      },
      // 图例
      legend: {
        top: "30",
        left: "center",
        itemWidth: 30,
        itemHeight: 10,
        //图例文字样式
        textStyle: {
          color: "#98a2d1",
        },
      },  
    };

    option && myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
</style>